<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import type { CheckboxValueType } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
  options: {
    type: Array,
    default: () => [],
  },
  multiple:{
    type: Boolean,
    default: () => true
  }
})

const emits = defineEmits(['update:modelValue', 'change'])

const innerValue = computed({
  get: () => props.modelValue,
  set: (newValue) => {
    
    emits('update:modelValue', newValue)
  },
})

const selectValue = computed({
  get: () => props.modelValue,
  set: (newValue) => {
    
    emits('update:modelValue', newValue)
  },
})

const checkType = ref('') // 只能选择一个类型

const checkOptions = computed(() => {
  if (!checkType.value) {
    checkType.value = props.options[0].value
  }
  if (checkType.value) {
    return props.options.filter((_) => _.value === checkType.value)[0].children
  }
})

const checkTypeChange = () => {
  // checkAll.value = false
  // indeterminate.value = false
  innerValue.value = []
}

// checkbox 逻辑
const checkAll = ref(false)
const indeterminate = ref(false)

watch(innerValue, (val) => {
  if (val.length === 0) {
    checkAll.value = false
    indeterminate.value = false
  } else if (val.length === checkOptions.value.length) {
    checkAll.value = true
    indeterminate.value = false
  } else {
    indeterminate.value = true
  }
})

const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false
  
  if (val) {
   
    innerValue.value = checkOptions.value.map((_) => _.value)
   
  } else {
    innerValue.value = []
  }
 
}

const changeTab = (value: any) => {
  var arr = value.value.split("_");

  emits('change2', arr[arr.length-1])
}

const handleCheckedChange = (value: CheckboxValueType[]) => {
  console.log(innerValue)
  
  emits('change', value)
}
// 绑定选中的值
const selectedValue = ref<Number>(0);
// 存储选中的 label
const selectedLabel = ref<string>('');
const handleSelectChange = (value: any) => {
  
  // console.log(value,'value')
  checkOptions.value.forEach(element => {
      if(value==element.id){
        selectedLabel.value = element.value;
        selectedValue.value = element.id;
       
      }
  });
 
  emits('changeSelect', {id:value,type:checkType.value})
 
}







// TODO select 逻辑多选，绑定Item
</script>

<template>
  <el-popover placement="bottom" :width="560" trigger="click">
    <template #reference >
      <el-input-tag v-if="multiple" v-model="innerValue" clearable></el-input-tag>
      <el-input v-if="multiple==false" v-model="selectedLabel" clearable></el-input>
    </template>
    
    <div class="container-main">
      
      <el-radio-group v-model="checkType" @change="checkTypeChange">
        <el-radio-button
        @click="changeTab(item)"
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-radio-group>

      <div class="check-all">
        <el-checkbox v-if="multiple" v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">
          All
        </el-checkbox>
      </div>
      <div style="padding-left: 24px">
        
        <el-checkbox-group v-if="multiple" value="id" v-model="innerValue" @change="handleCheckedChange">
          <el-checkbox v-for="item in checkOptions"  :key="item.id" :label="item.value">
            {{ item.value }}
          </el-checkbox>
        </el-checkbox-group>
       
        <el-select v-if="multiple==false"
         v-model="selectValue"
          :multiple="multiple"
          collapse-tags
          :max-collapse-tags="3"
          clearable
          placeholder="Select"
          @change="handleSelectChange"
        >
          <el-option
            v-for="item in checkOptions"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </div>
    </div>
  </el-popover>
</template>

<style scoped lang="scss">
.container-main {
  padding: 5px;
  .check-all {
    margin-top: 12px;
  }
}
</style>
